• Adding Sorting to a Repeating Section
• Duplicate and Copy Rows in a Repeating Section
• Dynamically Compute Values for Added Rows in a Repeating Section
• Populating a Repeating Section from a Table
• Prompting for Content in a Repeating Section before Adding a Row
• Swapping and Moving Rows in a Repeating Section

Adding Sorting to a Repeating Section

Description

You can use Javascript to add sorting capabilities to a repeating section.

Sorting of a repeating section can be accomplished by attaching the following method to an event. The method takes the repeating section to be sorted as an argument. It also takes a 'column' argument that specifies the column to sort and a 'direction' argument which determines the direction that the sections are sorted in.

• sortRepeatingSection(id,column,direction)

For an explanation about adding sorting to a repeating section watch this video or follow the guides below.

Adding Sort to an Individual Column in a Repeating Section

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the textbox the name and label 'City'.

   

2. Add a second textbox to the component with the name and label 'Country'.

   

3. Highlight the textbox controls and click the 'Toggle break' button in the toolbar to remove any toggle breaks. Open the 'Containers' menu and click on the [Container] option.

   

4. From the 'Container Type' list select the 'RepeatingSection' option and click OK.

   

5. The repeating section container's opening tag should look like this:

   [RepeatingSection:REPEATINGSECTION_1]

   

6. Highlight the [RepeatingSectionEnd:REPEATINGSECTION_1] tag. Open the 'Other Controls' menu and click on the [Button] option to add a button control to the component.

   

7. Highlight the button control. In the properties list on the right set the 'Button text' property to read 'Sort'.

   

8. Scroll down the properties list to the 'Javascript' section and click the [...] button next to the 'onClick' property.

   

9. In the 'Edit onClick Event' dialog select the 'Text mode' radio button. Add the following definition to the onClick event and click 'Save'.

   {dialog.object}.sortRepeatingSection('REPEATINGSECTION_1','city','A');

   
   Here the 'REPEATINGSECTION_1' argument identifies the container where the sort will occur. The 'city' argument identifies the field to sort and the 'A' argument signifies that the field will be sorted in the direction A to Z.

10. Run the component in Live Preview. Fill in all of the fields with information.

    

11. Click the 'Sort' button. The rows in the repeating section should sort by city.

    

Creating a Sort for Multiple Fields in a Repeating Section

This method of sorting allows you to sort fields by clicking on the Field labels. No buttons are required.

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the textbox the name 'city'. Use the following label to define the textbox:

   <span onclick="sort('city')">City</span>

   
   You can change the label after creating the control by highlighting the control in the controls tree and then going to the 'Label' property in the control's properties list on the right. The property is in the 'Field Label' section.

2. Add a second textbox control to the component with the name 'country' and the following label:

   <span onclick="sort('country')">Country</span>

   

3. Highlight both textbox controls in the controls tree and click the 'Toggle break' button to turn off the toggle break. Open the 'Container' menu on the left and select the [Container] option.

   

4. From the Container Type list select the RepeatingSection option and click OK.

   

5. In the span that was added in creating the textbox labels there was a sort() function that was called. To define this function go to the 'Code' menu and open the 'Javascript functions' page from the main menu. Add the following code to the Javascript functions page.

   function sort(colName) {
       {dialog.object}.sortRepeatingSection('REPEATINGSECTION_1',colName,'A');
   }

   

6. Run the component in Live Preview. Fill in example data into each of the rows in the repeating section.

   

7. Click the 'City' field label. The rows should be sorted by cities listed in alphabetical order.

   

8. Click on the 'Country' field label. The rows should now sort by country.